<template>
  <div class="map-container">
    <el-row class="top-bar">
      <el-col :span="6">
        <el-input
          v-model="searchName"
          placeholder="请输入城市名搜索"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="type"
          placeholder="选择绘制类型"
          @change="handleTypeChange"
        >
          <el-option
            v-for="item in drawOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="mark"
          placeholder="选择标记类型"
          @change="handleMarkChange"
          :disabled="zoom < 13"
        >
          <el-option
            v-for="item in markOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <MyMap
      :cityName="cityName"
      :type="type"
      :mark="mark"
      :searchName="searchName"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import MyMap from './components/MyMap.vue'

const cityName = ref('')
const type = ref('')
const mark = ref('')
const searchName = ref('')
const zoom = ref(10)

const drawOptions = [
  { label: '点', value: 'point' },
  { label: '线', value: 'polyline' },
  { label: '面', value: 'polygon' },
  { label: '清除', value: 'clear' },
]

const markOptions = [
  { label: '默认标记', value: 'default' },
  { label: '重要标记', value: 'important' },
]

onMounted(async () => {
  if (!window.AMap) {
    console.error('高德地图API未加载')
    return
  }

  AMap.plugin('AMap.CitySearch', () => {
    const citySearch = new AMap.CitySearch()
    citySearch.getLocalCity((status, result) => {
      if (status === 'complete' && result.city) {
        cityName.value = result.city
      }
    })
  })
})

watch(zoom, (newVal) => {
  console.log('当前缩放级别:', newVal)
})
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.top-bar {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>
